import React from 'react';
import PropTypes from 'prop-types';
import { Form, message, Input, Row, Col, Modal, Checkbox, Radio } from 'antd';
import moment from 'moment';
import PermissionTree from '../sysPermission/permissionTree';
import { api } from '../../services/sysRole';
import { isReleaseVersion } from '../../components/permissionControl';
import { connect } from 'dva';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;

const styles = {
	input: {
		marginBottom: '0'
	}
};

const formItemLayout = {
	labelCol: {
		span: 6,
	},
	wrapperCol: {
		span: 14,
	},
	style: styles.input
};

@connect(({ app }) => ({ user: app.user }))
class MyModal extends React.Component {
	state = {
		isShareData: null,
		isAddMoreServiceMode: null,
		isRelease: false,
	}

	componentDidUpdate(prevProps) {
		const { form, data } = this.props;
		const { setFieldsValue } = form;
		if (!data || prevProps.data === data) return;
		setFieldsValue(data);
		this.setState({ isShareData: !!data.isShareServiceMode, isAddMoreServiceMode: !!data.isAddMoreServiceMode });
	}

	onOk = () => {
		const { form, onOk, data, permissionIds, user: { permissions: userPermissions }, roleDetail } = this.props;
		const { isShareData, isAddMoreServiceMode } = this.state;
		const isRelease = isReleaseVersion(userPermissions, api.getDetail);
		form.validateFields();
		const errors = form.getFieldsError();
		for (const k in errors) {
			if (errors[k] && errors[k].length) return;
		}
		let d = form.getFieldsValue();
		d.permissions = permissionIds;
		d.isShareData = isShareData * 1;
		d.isShareServiceMode = isShareData * 1;
		roleDetail.isAddMoreServiceMode ? d.isAddMoreServiceMode = isAddMoreServiceMode * 1 : '';
		if (data.id) {
			d.id = data.id;
		} else {
			d = { ...data, ...d };
		}
		if (!d.permissions || !d.permissions.length) {
			message.warning('请勾选权限');
			return;
		}
		d.permissions = d.permissions.filter(id => id !== '0');

		// 分开两个字段
		const permissions = [];
		const versions = [];
		d.permissions.forEach(v => {
			if (v * 0 === v * 0) permissions.push(v);
			else versions.push(v.split('-')[1]);
		});
		d.permissions = permissions;
		d.versions = versions;
		if (!isRelease) {
			d.shareBenefitType = 0;
		}
		d.shareBenefitType = 1;
		onOk(d);
	}

	render() {
		const { isShareData, isAddMoreServiceMode } = this.state;
		const { user: { permissions = [] } } = this.props;
		const isRelease = isReleaseVersion(permissions, api.getDetail);
		const {
			form, data, handleCancel,
			permissionSelect, permissionList, permissionIds, roleDetail
		} = this.props;
		const { getFieldDecorator } = form;
		const item = data || {};
		return (
			<Modal
				title={item.id ? '角色详情' : '新增角色'}
				visible={!!data}
				onOk={this.onOk}
				onCancel={handleCancel}
				width={1000}
			>
				<Form layout="horizontal">
					<Row type="flex" justify="space-around" align="middle">
						<Col span={10} style={{ borderRight: '1px solid #ccc' }}>
							<h4>权限列表</h4>
							<PermissionTree
								list={permissionList}
								select={permissionSelect}
								checkedKeys={permissionIds}
							/>
						</Col>
						<Col span={14}>
							<Row type="flex">
								<Col span={12} justify="space-around" align="middle">
									<FormItem label="角色名" hasFeedback labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
										{getFieldDecorator('roleName', {
											initialValue: item.permissionName,
											rules: [
												{
													required: true,
													message: '请输入角色名称!'
												},
												{
													pattern: /^[\u4e00-\u9fa5a-zA-Z0-9]{0,20}$/,
													message: '最多输入20个字符，只能输入中文、数字或英文字母'
												},
												{
													validator: this.props.nameValidator,
													message: '该角色名已存在'
												}
											]
										})(<Input style={styles.input} placeholder="请输入角色名称" />)}
									</FormItem>
								</Col>
								<Col span={12}>
									<FormItem label="简介" hasFeedback {...formItemLayout}>
										{getFieldDecorator('remark', {
											initialValue: item.remark,
											rules: [
												{
													required: true,
													message: '请输入角色简介!'
												},
												{
													pattern: /^[\u4e00-\u9fa5a-zA-Z0-9]{0,40}$/,
													message: '最多输入40个字符，只能输入中文、数字或英文字母'
												}
											]
										})(<Input placeholder="请输入角色描述" />)}
									</FormItem>
								</Col>
							</Row>
							{/* {isRelease &&
								<FormItem label="设置分润权限" hasFeedback labelCol={{ span: 4 }} >
									{getFieldDecorator('shareBenefitType', {
										initialValue: item.shareBenefitType
									})(<RadioGroup>
										<Radio value={1}>不参与分润</Radio>
										<Radio value={3}>参与分润</Radio>
										<Radio value={2}>独立收款</Radio>
										<Radio value={4}>参与缴款</Radio>
									</RadioGroup>)}
								</FormItem>
							} */}
							{/* <FormItem label="设置收费权限" hasFeedback labelCol={{ span: 4 }} >
								{roleDetail.isAddMoreServiceMode ? (
									<Checkbox
										checked={isAddMoreServiceMode}
										onChange={e => this.setState({ isAddMoreServiceMode: e.target.checked })}
									>允许设备采用多个收费模式</Checkbox>
								) : null}
								<Checkbox
									checked={isShareData}
									onChange={e => this.setState({ isShareData: e.target.checked })}
								>收费数据共享</Checkbox>
							</FormItem> */}
							{
								item.id ?
									<Row>
										<Col span={12}><FormItem label="修改时间" hasFeedback labelCol={{ span: 8 }}>
											{moment(item.utime).format('YYYY-MM-DD HH:mm:ss')}
										</FormItem></Col>
										<Col span={12}><FormItem label="系统用户数量" hasFeedback labelCol={{ span: 8 }}>
											{item.sysUserCount}
										</FormItem></Col>
										<Col span={12}><FormItem label="创建时间" hasFeedback labelCol={{ span: 8 }}>
											{moment(item.ctime).format('YYYY-MM-DD HH:mm:ss')}
										</FormItem></Col>
									</Row>
									: null
							}
						</Col>
					</Row>
				</Form>
			</Modal>
		);
	}
}

MyModal.propTypes = {
	data: PropTypes.object,
	onOk: PropTypes.func,
	handleCancel: PropTypes.func,
	permissionSelect: PropTypes.func,
	permissionList: PropTypes.array,
	permissionIds: PropTypes.array,
};

export default Form.create()(MyModal);
